<template>
  <div class="page">
    <div>
      <div class="block">
        <el-row>
          <el-col :span="8"><div class="grid-content bg-purple">
            <div class="cascader">
              <el-cascader
                v-model="option"
                :options="options"
                :show-all-levels="false"
                @change="handleCascaderChange"></el-cascader>
            </div>
          </div></el-col>
          <el-col :span="8"><div class="grid-content bg-purple-light">
            <div class="date-picker">
              <!-- 日期选择器-->
              <el-date-picker
                v-model="date"
                type="date"
                placeholder="选择日期"
                :picker-options="pickerOptions"
                format="yyyy 年 MM 月 dd 日"
                value-format="yyyy-MM-dd"
                @change="handleDateChange">
              </el-date-picker>
            </div>
          </div></el-col>
          <el-col :span="8"><div class="grid-content bg-purple">
            <div class="pagination">
              <!--          分页-->
              <el-pagination
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page="pagination.currentPage"
                :page-sizes="[999999999, 100, 200, 300, 400]"
                :page-size="pagination.pageSize"
                layout="total, sizes, prev, pager, next, jumper"
                :total="pagination.total">
              </el-pagination>
            </div>
          </div></el-col>
        </el-row>
      </div>
    </div>
    <!--百度地图容器-->
    <div class="allmap" id="allmap"></div>
  </div>
</template>

<script>
export default {
  data () {
    return {
      options: require('@/assets/json/options.json'),
      sites: require('@/assets/json/sites.json'),
      SiteList: [],
      option: [],
      projectId: 0,
      carId: 0,
      arrayList: [],
      CoordDate: {},
      CoordList: [],
      Coord: [],
      pickerOptions: {
        disabledDate (time) {
          // return time.getTime() > Date.now()
        },
        shortcuts: [{
          text: '昨天',
          onClick (picker) {
            const date = new Date()
            date.setTime(date.getTime() - 3600 * 1000 * 24)
            picker.$emit('pick', date)
          }
        }, {
          text: '一周前',
          onClick (picker) {
            const date = new Date()
            date.setTime(date.getTime() - 3600 * 1000 * 24 * 7)
            picker.$emit('pick', date)
          }
        }]
      },
      date: '',
      pagination: {
        currentPage: 1,
        pageSize: 999999999,
        total: 0
      }
    }
  },
  methods: {
    getCoordDate (date) {
      try {
        const Coord = require('@/assets/json/' + date + '.json')
        this.CoordDate = Coord
        if (Coord.length === 0) {
          this.msg(date + '数据为空', 'warning')
        }
      } catch (e) {
        console.log(date + '没有数据')
        this.msg(date + '没有数据', 'error')
        this.CoordDate = {}
      }
    },
    getProjectSite (projectId) {
      this.SiteList = this.sites[projectId]
    },
    getCoordList (carId) {
      try {
        this.CoordList = this.CoordDate[carId]
        // console.log(this.CoordList)
        this.pagination.total = this.CoordList.length
        this.pagination.pageSize = 999999999
        this.pagination.currentPage = 1
        if (this.CoordList.length === 0) {
          this.msg('该车辆今日数据为空', 'warning')
        }
      } catch (e) {
        this.msg('请选择要查询的车辆', 'warning')
        this.CoordList = []
        // console.log(this.CoordList)
        this.pagination.total = this.CoordList.length
        this.pagination.pageSize = 999999999
        this.pagination.currentPage = 1
      }
    },
    getCoord (beginNum, endNum) {
      this.Coord = this.CoordList.slice(beginNum, endNum)
    },
    BaiduMap () {
      // 百度地图API功能
      var map = new BMap.Map('allmap')
      map.centerAndZoom(new BMap.Point(106.318732, 29.619364), 19)
      map.enableScrollWheelZoom(true)
      window.map = map
    },
    addmarker () {
      this.arrayList = []
      this.Coord.forEach((item, index) => {
        var coord = this.gps_bgps(item.Longitude, item.Latitude)
        var p = new BMap.Point(coord.bdlng, coord.bdlat)
        this.arrayList.push(p)
      })
      const pointList = this.arrayList
      // 循环显示点对象
      for (var c = 0; c < pointList.length; c++) {
        var marker = new BMap.Marker(pointList[c])
        map.addOverlay(marker)
        window.marker = marker
        // 将途经点按顺序添加到地图上
        var label = new BMap.Label(c + 1, { offset: new BMap.Size(20, -10) })
        marker.setLabel(label)
        window.label = label
      }
      // 绘制线
      var polyline = new BMap.Polyline(pointList, {
        strokeColor: 'blue',
        strokeWeight: 2,
        strokeOpacity: 0.5
      })
      map.addOverlay(polyline)
      window.polyline = polyline // 将折线储存在全局

      this.SiteList.forEach((item, index) => {
        var coord = this.gps_bgps(item.longitude, item.latitude)
        var point = new BMap.Point(coord.bdlng, coord.bdlat)
        var circle = ''
        if (item.type === '1') {
          circle = new BMap.Circle(point, item.scope, {
            strokeColor: 'red',
            strokeWeight: 2,
            strokeOpacity: 0.5
          }) // 创建圆
          map.addOverlay(circle)
        } else if (item.type === '2') {
          circle = new BMap.Circle(point, item.scope, {
            strokeColor: 'green',
            strokeWeight: 2,
            strokeOpacity: 0.5
          }) // 创建圆
          map.addOverlay(circle)
        } else {
        }

        var p = new BMap.Point(coord.bdlng, coord.bdlat)
        var marker = new BMap.Marker(p)
        map.addOverlay(marker)
        var label = new BMap.Label(item.name, { offset: new BMap.Size(-20, -20) })
        var scope = new BMap.Label('半径=' + item.scope + 'm', { offset: new BMap.Size(20, 20) })
        marker.setLabel(label)
        marker.setLabel(scope)
      })
    },
    deletePoint () {
      map.clearOverlays() // 删除全部
    },
    // 百度坐标转高德（传入经度、纬度）
    bgps_gps (bdlng, bdlat) {
      var X_PI = Math.PI * 3000.0 / 180.0
      var x = bdlng - 0.0065
      var y = bdlat - 0.006
      var z = Math.sqrt(x * x + y * y) - 0.00002 * Math.sin(y * X_PI)
      var theta = Math.atan2(y, x) - 0.000003 * Math.cos(x * X_PI)
      var gglng = z * Math.cos(theta)
      var gglat = z * Math.sin(theta)
      return {
        lng: gglng,
        lat: gglat
      }
    },
    // 高德坐标转百度（传入经度、纬度）
    gps_bgps (gglng, gglat) {
      var X_PI = Math.PI * 3000.0 / 180.0
      var x = gglng
      var y = gglat
      var z = Math.sqrt(x * x + y * y) + 0.00002 * Math.sin(y * X_PI)
      var theta = Math.atan2(y, x) + 0.000003 * Math.cos(x * X_PI)
      var bdlng = z * Math.cos(theta) + 0.0065
      var bdlat = z * Math.sin(theta) + 0.006
      return {
        bdlat: bdlat,
        bdlng: bdlng
      }
    },
    handleDateChange () {
      this.getCoordDate(this.date) // 重新获取文件数据
      this.getCoordList(this.carId) // 重新获取车辆数据
      this.getProjectSite(this.projectId)
      this.getCoord(0, this.pagination.pageSize)
      this.deletePoint()
      this.addmarker()
    },
    handleCascaderChange () {
      this.projectId = this.option[0]
      this.carId = this.option[2]
      this.getCoordList(this.carId)
      this.getProjectSite(this.projectId)
      this.getCoord(0, this.pagination.pageSize)
      this.deletePoint()
      this.addmarker()
    },
    handleSizeChange (val) {
      this.pagination.pageSize = val
      const beginNum = this.pagination.pageSize * (this.pagination.currentPage - 1)
      const endNum = this.pagination.pageSize * this.pagination.currentPage
      // console.log(beginNum, endNum)
      this.getCoord(beginNum, endNum)
      // console.log(this.Coord)
      // console.log(this.pagination.pageSize)
      this.deletePoint()
      this.addmarker()
    },
    handleCurrentChange (val) {
      this.pagination.currentPage = val
      const beginNum = this.pagination.pageSize * (this.pagination.currentPage - 1)
      const endNum = this.pagination.pageSize * this.pagination.currentPage
      // console.log(beginNum, endNum)
      this.getCoord(beginNum, endNum)
      // console.log(this.Coord)
      // console.log(this.pagination.pageSize)
      this.deletePoint()
      this.addmarker()
    },
    msg (msg, type) {
      this.$message({
        showClose: true,
        message: msg,
        type: type
      })
    }
  },
  mounted () {
    const yy = new Date().getFullYear()
    const mm = new Date().getMonth() + 1
    const dd = new Date().getDate()
    const date = yy + '-' + mm + '-' + dd
    this.date = date
    this.BaiduMap()
    this.getCoordDate(date)
  }
}
</script>

<style scoped>
.allmap {
  width: 100%;
  min-height: 95%;
  overflow: hidden;
  margin: 0;
  position: absolute;
  font-family: "微软雅黑";
}
</style>
